<template>
	<view class="page">
		<view class="container" >
		      <view class="centercontent">
		        <view class="view1">
					<view class="row" v-if="personId">
						<view class="label" >
							{{language.leaveRequest.label8}}:
						</view>
						<view class="value">
							{{personName}}
						</view>
					</view>
					<view class="row" @click="sdateShow=true">
						<view class="label" >
							{{language.leaveRequest.label1}}:
						</view>
						<view class="value">
							{{form.sdate?form.sdate: language.leaveRequest.tip1}}
						</view>
					</view>
					<view class="row" @click="edateShow=true">
						<view class="label" >
							{{language.leaveRequest.label2}}:
						</view>
						<view class="value">
							{{form.edate?form.edate:language.leaveRequest.tip1}}
						</view>
					</view>
		          <view class="separateline"></view>
		        </view>
		        <view class="view2">
		          <text class="text">{{language.leaveRequest.label3}}：{{form.numofdate?form.numofdate:''}}</text>
		        </view>
		      </view>
		      <view class="row">
				  <view class="label">{{language.leaveRequest.label4}}：</view>
				  <view class="value">
						<u-radio-group
						   v-model="form.afltype"
						   placement="row"
						 >
						   <u-radio
						     :customStyle="{marginRight: '8px'}"
						     v-for="(item, index) in typeRadioItem"
						     :key="index"
						     :label="item.name"
						     :name="item.value"
						   >
						   </u-radio>
						 </u-radio-group>
				  </view>
				 
		      </view>
		
		      <view class="row">
				  <view class="label">{{language.leaveRequest.label5}}：</view>
				  <view class="value">
						<u-radio-group
						   v-model="form.outschool"
						   placement="row"
						 >
						   <u-radio
						     :customStyle="{marginRight: '8px'}"
						     v-for="(item, index) in isOutSchoolRadioItem"
						     :key="index"
						     :label="item.name"
						     :name="item.value"
						   >
						   </u-radio>
						 </u-radio-group>
				  </view>
		      </view>
		
		      <view class="row" v-if="form.outschool==1">
				  <view class="label">{{language.leaveRequest.label6}}：</view>
				  <view class="value">
				  		<u-radio-group
				  			v-model="form.leaveMode" @change="leaveModeChange"
				  			placement="row"
				  			>
				  			<u-radio
				  				:customStyle="{marginRight: '8px'}"
				  				v-for="(item, index) in leaveModeRadioItems"
				  				:key="index"
				  				:label="item.name"
				  				:name="item.value"
				  			>
				  			</u-radio>
				  		</u-radio-group>
				  </view>
		      </view>
		
			<!-- #ifdef MP-WEIXIN -->
			<view class="leixing" v-if="form.afltype==1" style="display:flex;">
			     <view class="name" style="width: 130rpx;display: flex;justify-content: flex-end;">{{language.leaveRequest.label7}}：</view>
			     <view class="value" style="flex:1;">
			       <checkbox-group @change="diseaseCheckboxChange" style="width: 100%;display: flex;flex-wrap: wrap;">
			         <label class="weui-cell weui-check__label" v-for="(item,index) in diseaseItem"  :key="index" style="margin:5rpx;">
			           <view class="weui-cell__hd">
			             <checkbox :value="item.name" :checked="item.checked" />{{item.name}}
			           </view>
			         </label>
			       </checkbox-group>
			     </view>
			 </view>
			<!-- #endif -->
		    
		
		      <view class='containerView'>
		          <textarea type='text'   @input="contentInput" :value="form.content" name="content"  :placeholder='language.leaveRequest.tip2' />
		          <view class='btnOperate'>
		            <view v-if="isAdd!=3">
		              <button @click="formSubmit" v-if="isAdd != 3">{{language.leaveRequest.submit}}</button>
		            </view>
		          </view>
		      </view>
			  
			  <view class="applyResult" v-if="applyResults.length">
					<u-steps :current="applyResults.length">
							<u-steps-item :title="item.auditPersonName" :error="item.error" v-for="(item,index) in applyResults" :key="index" :desc="item.resultText">
							</u-steps-item>
					</u-steps>
			  </view>
		    </view>
			<u-datetime-picker
			    :show="sdateShow" ref="datetimePicker" v-model="sdate" 
			    mode="datetime"  @cancel="sdateShow=false" @confirm="sdateConfirm"
			       ></u-datetime-picker>
			<u-datetime-picker
				:show="edateShow" ref="datetimePicker" v-model="edate" 
				mode="datetime"  @cancel="edateShow=false" @confirm="edateConfirm"
			   ></u-datetime-picker>
	</view>
</template>

<script>
	import {attAskforleaveAddApi,attAskforleaveEditApi,attAskforleaveQueryByIdApi} from '@/common/api/commonApi/checking.js'
	export default {
		data() {
			return {
				form:{
					sdate: '',
					stime: '',
					edate:'',
					etime:'',
					numofdate:'',
					content:'',
					afltype:0,
					outschool:1,
					leaveMode:'1',
					diseaseContent :''
				},
				sdate: Number(new Date()),
				stime: Number(new Date()),
				edate:Number(new Date()),
				etime:Number(new Date()),
				days:'',
				typeRadioItem: [{
				        name: '事假',
				        value: 0,
				        checked: true
				    },
				    {
				        name: '病假',
				        value: 1,
				        checked: false
				    },
				    {
				        name: '其它',
				        value: 2,
				        checked: false
				    },
				],
				type : 0,
				//出校
				isOutSchoolRadioItem: [{
				        name: '是',
				        value: 1,
				        checked: true
				    },
				    {
				        name: '否',
				        value: 0,
				        checked: false
				    },
		
				],
				isOutSchool: 1,
				leaveModeRadioItems: [{
				        name: '家长接送',
				        value: '1',
				        checked: true
				    },
				    {
				        name: '自行回家',
				        value: '2',
				        checked1: false
				    },
				],
				leaveMode: 1,
				content:'',
				selectInfoAccount: uni.getStorageSync('selectInfoAccount'),
				submiting: false,
				diseaseItem: [
					{
						name: '发热',
						checked: false, 
					},
					{
						name: '咳嗽',
						checked: false, 
					},{
						name: '头疼',
						checked: false, 
					},{
						name: '咽痛',
						checked: false, 
					},{
						name: '腮腺肿大',
						checked: false, 
					},{
						name: '腹痛',
						checked: false, 
					},{
						name: '腹泻',
						checked: false, 
					},{
						name: '呕吐',
						checked: false, 
					},{
						name: '皮疹',
						checked: false, 
					},{
						name: '头晕',
						checked: false, 
					},{
						name: '乏力',
						checked: false, 
					},{
						name: '结膜红肿/充血',
						checked: false, 
					},{
						name: '鼻衄',
						checked: false, 
					},{
						name: '黄疸',
						checked: false, 
					},{
						name: '恶心',
						checked: false, 
					},{
						name: '鼻塞/流鼻涕',
						checked: false, 
					},{
						name: '肌肉/关节痛',
						checked: false, 
					},{
						name: '嗅(味)觉减退',
						checked: false, 
					},{
						name: '受伤',
						checked: false, 
					},{
						name: '心理疾病症状',
						checked: false, 
					},{
						name: '牙痛',
						checked: false, 
					},{
						name: '其他症状',
						checked: false, 
					},
				],
				isAdd: 1,//1添加 2编辑 3详情
				sdateShow: false,
				edateShow: false,
				id: '',
				applyResults : [],
				personId: '',
				personName: ''
			}
		},
		methods: {
			leaveModeChange(e){
				console.log(e);
				this.form.leaveMode = e
			},
			getDaysBetweenDates(date1, date2) {
			  let oneDay = 24 * 60 * 60 * 1000;
			  let diffDays = Math.round(Math.abs((date1 - date2) / oneDay));
			  // let diffDays =Math.abs((date1 - date2) / oneDay);
			  // console.log(diffDays);
			  this.form.numofdate = diffDays
			  return diffDays;
			},
			sdateConfirm(e){
				let date = this.dateformat(e.value)
				this.form.sdate = date
				console.log(this.form.sdate);
				this.sdateShow = false
				// if(this.form.sdate && this.form.edate) this.getDaysBetweenDates(new Date(this.form.sdate),new Date( this.form.edate))
				this.NumberOfDays()
			},
			edateConfirm(e){
				let date = this.dateformat(e.value)
				this.form.edate = date
				console.log(this.form.edate);
				this.edateShow = false
				// if(this.form.sdate && this.form.edate) this.getDaysBetweenDates(new Date(this.form.sdate),new Date( this.form.edate))
				this.NumberOfDays()
			},
			 formSubmit: function() {
			        if (!this.form.sdate) {
						this.setMessage('请选择开始时间')
			        } else if (!this.form.edate) {
						this.setMessage('请选择结束时间')
			        } else if (!this.form.numofdate ||this.form.numofdate == 'NaN' || this.form.numofdate < 0) {
			            this.setMessage('请假天数须大于0')
			        } else if (!this.form.content) {
						this.setMessage('请输入请假事由')
			        } else {
						if(this.submiting) return
			            this.submiting = true
			            var data = {
			                personid: this.personId ? this.personId : this.selectInfoAccount.id, //用户ID，请假人
			                content: this.form.content, //请假事由
			                afltype: this.form.afltype, //类型 0：事假  1：病假  2：其它
							diseaseContent : this.form.afltype==1? this.form.diseaseContent : '',
			                outschool: this.form.outschool, //出校 0：否  1：是
			                leaveMode: this.form.outschool == 0 ? 0 : this.form.leaveMode, //1、家长接送 2、自行回家
			                sdate: this.dateformat(this.form.sdate), //开始时间
			                edate: this.dateformat(this.form.edate), //结束时间
			                numofdate: this.form.numofdate, //天数
							openid: uni.getStorageSync('openId'),
							from: this.personId ? 'teacher' : '',
			                // status: '0', //审批状态 0:未审 1:通过 2:未通过 3:已审
			                // reviewcontent: '', //审核意见
			                departmentId: this.selectInfoAccount.departmentId, //班级id
			            }
			            console.log('请假申请data')
			            console.log(data)
						if(this.isAdd==1){
							attAskforleaveAddApi(data).then(res=>{
								this.setMessage('提交成功')
								setTimeout(()=>{
									this.goBack()
								},500)
							}).finally(res=>{
								this.submiting = false
							})
						}else if(this.isAdd==2){
							console.log(this.form);
							attAskforleaveEditApi(this.form).then(res=>{
								this.setMessage('修改成功')
								setTimeout(()=>{
									this.goBack()
								},500)
							}).finally(res=>{
								this.submiting = false
							})
						}
			        }
			    },
			contentInput(e){
				this.form.content = e.detail.value
			},
			getDetail(){
				return attAskforleaveQueryByIdApi({
					id: this.id
				}).then(res=>{
					this.form = res.result
					if(res.result.applyResults && res.result.applyResults.length){
						res.result.applyResults.forEach(item=>{
							item.resultText = item.result>0? '已审核': '未审核'
							if(item.result==2){
								item.error = true
								item.resultText = `${item.updateTime}--审核不通过`
							}else{
								item.error = false
								if(item.result==1){
									item.resultText = `${item.updateTime}--审核通过`
								}
							}
						})
						this.applyResults = res.result.applyResults
					}
					
					if(this.form.diseaseContent){
						this.diseaseItem.forEach(item=>{
							if(this.form.diseaseContent.includes(item.name)){
								item.checked = true
							}else{
								item.checked = false
							}
							
						})
					}
				})
			},
			diseaseCheckboxChange(e){
				console.log(e);
				let str = e.detail.value.join(',')
				console.log(str);
				this.form.diseaseContent = str
				this.form.content= str
			},
			  // 计算天数
			NumberOfDays: function() {
			    if (!this.form.sdate) {
					// this.setMessage('请选择开始日期')
			    } else if (!this.form.edate) {
					// this.setMessage('请选择结束日期')
			    } else {
			        // 开始日期
			        // var sdate = this.form.sdate;
			        var sdate = this.dateformat(this.form.sdate).split(' ')[0];
			        var sdateStamp = Date.parse(new Date(sdate));
			        sdateStamp = sdateStamp / 1000;
			        // var stime = this.form.stime
			        var stime = this.dateformat(this.form.sdate).split(' ')[1]
			        var newsdate = sdate + ' ' + stime
			        newsdate = newsdate.replace(/-/g, '/')
			        var newsdateStamp = Date.parse(new Date(newsdate));
			        newsdateStamp = newsdateStamp / 1000;
			        // 结束日期
			        // var edate = this.form.edate;
			        var edate =  this.dateformat(this.form.edate).split(' ')[0];
			        var edateStamp = Date.parse(new Date(edate));
			        edateStamp = edateStamp / 1000;
			        // 结束时间
			        // var etime = this.form.etime
			        var etime = this.dateformat(this.form.edate).split(' ')[1]
			        // 结束日期+结束时间
			        var newedate = edate + ' ' + etime
			        newedate = newedate.replace(/-/g, '/')
			        var newedateStamp = Date.parse(new Date(newedate));
			        newedateStamp = newedateStamp / 1000;
			        // 上午上班时间
			        var swsworkstime = '08:30'
			        // 开始上班日期+上午上班时间
			        var newswsworksdate = sdate + ' ' + swsworkstime
			        newswsworksdate = newswsworksdate.replace(/-/g, '/')
			        var newswsworksdateStamp = Date.parse(new Date(newswsworksdate));
			        newswsworksdateStamp = newswsworksdateStamp / 1000;
			        // 上午下班时间
			        var swxworkstime = '12:00'
			        // 上午下班日期+上午下班时间
			        var newswxworksdate = sdate + ' ' + swxworkstime
			        newswxworksdate = newswxworksdate.replace(/-/g, '/')
			        var newswxworksdateStamp = Date.parse(new Date(newswxworksdate));
			        newswxworksdateStamp = newswxworksdateStamp / 1000;
			        // 下午上班时间
			        var xwsworketime = '13:30'
			        // 下午上班日期+下午上班时间
			        var newxwsworkedate = edate + ' ' + xwsworketime
			        newxwsworkedate = newxwsworkedate.replace(/-/g, '/')
			        var newxwsworkedateStamp = Date.parse(new Date(newxwsworkedate));
			        newxwsworkedateStamp = newxwsworkedateStamp / 1000;
			        // 下午下班时间
			        var xwxworketime = '17:30'
			        // 结束上班日期+下午下班时间
			        var newxwxworkedate = edate + ' ' + xwxworketime
			        newxwxworkedate = newxwxworkedate.replace(/-/g, '/')
			        var newxwxworkedateStamp = Date.parse(new Date(newxwxworkedate));
			        newxwxworkedateStamp = newxwxworkedateStamp / 1000;
			        // 上午上班总时长
			        var swsworktotaltime = (newswxworksdateStamp - newswsworksdateStamp) / 60 / 60
			        // 下午上班总时长
			        var xwsworktotaltime = (newxwxworkedateStamp - newxwsworkedateStamp) / 60 / 60
			        // 一天上班总时长
			        var worktotaltime = swsworktotaltime + xwsworktotaltime
			        // 上午请假总时长
			        var swleavetotaltime = 0
			            // 下午请假总时长
			        var xwleavetotaltime = 0
			            // 请假总时长
			        var leavetotaltime = 0
			        if (sdateStamp > edateStamp) {
			            this.setMessage('开始日期需要小于结束日期')
			        } else if (newsdateStamp > newedateStamp) {
			            this.setMessage('开始时间需要小于结束时间')
			        } else if (newsdateStamp == newedateStamp) {
			        } else if (sdateStamp <= edateStamp) {
			            // 上午
			            if (newsdateStamp < newswsworksdateStamp) {
			                if (newedateStamp > newswsworksdateStamp && newedateStamp < newswxworksdateStamp) {
			                    swleavetotaltime = (newedateStamp - newswsworksdateStamp) / 60 / 60
			                } else if (newedateStamp >= newswxworksdateStamp) {
			                    swleavetotaltime = swsworktotaltime
			                }
			            } else if (newsdateStamp >= newswsworksdateStamp && newsdateStamp < newswxworksdateStamp) {
			                if (newedateStamp > newswsworksdateStamp) {
			                    if (newedateStamp <= newswxworksdateStamp) {
			                        swleavetotaltime = (newedateStamp - newsdateStamp) / 60 / 60
			                    } else {
			                        swleavetotaltime = (newswxworksdateStamp - newsdateStamp) / 60 / 60
			                    }
			                }
			            }
		
			            // 下午
			            if (newsdateStamp < newxwsworkedateStamp) {
			                if (newedateStamp > newxwsworkedateStamp && newedateStamp < newxwxworkedateStamp) {
			                    xwleavetotaltime = (newedateStamp - newxwsworkedateStamp) / 60 / 60
			                } else if (newedateStamp >= newxwxworkedateStamp) {
			                    xwleavetotaltime = xwsworktotaltime
			                }
			            } else if (newsdateStamp >= newxwsworkedateStamp && newsdateStamp < newxwxworkedateStamp) {
			                if (newedateStamp > newxwsworkedateStamp) {
			                    if (newedateStamp <= newxwxworkedateStamp) {
			                        xwleavetotaltime = (newedateStamp - newsdateStamp) / 60 / 60
			                    } else {
			                        xwleavetotaltime = (newxwxworkedateStamp - newsdateStamp) / 60 / 60
			                    }
			                }
			            }
		
			            if (sdateStamp == edateStamp) { // 同一天
			                leavetotaltime = ((swleavetotaltime + xwleavetotaltime) / worktotaltime).toFixed(2)
			            } else if (sdateStamp < edateStamp) { // 不是同一天
			                if (stime == etime) {
			                    leavetotaltime = ((edateStamp - sdateStamp) / 60 / 60 / 24).toFixed(2)
			                } else {
			                    leavetotaltime = ((edateStamp - sdateStamp) / 60 / 60 / 24 + (swleavetotaltime + xwleavetotaltime) / worktotaltime).toFixed(2)
			                }
			            }
			        }
					this.form.numofdate = leavetotaltime	
					console.log(this.form.numofdate);
			    }
			    },
		
		},
		onLoad({item,isAdd,id,personId,personName}) {
			this.setPageTitle(this.language.leaveRequest.title)
			this.typeRadioItem[0].name = this.language.leaveRequest.label9
			this.typeRadioItem[1].name = this.language.leaveRequest.label10
			this.typeRadioItem[2].name = this.language.leaveRequest.label11
			this.isOutSchoolRadioItem[0].name = this.language.leaveRequest.label12
			this.isOutSchoolRadioItem[1].name = this.language.leaveRequest.label13
			this.leaveModeRadioItems[0].name = this.language.leaveRequest.label14
			this.leaveModeRadioItems[1].name = this.language.leaveRequest.label15
			 if(this.$Route.query.isAdd) this.isAdd = this.$Route.query.isAdd
			 if(this.$Route.query.item) this.form = this.$Route.query.item
			 if(this.$Route.query.personId) this.personId = personId
			 if(this.$Route.query.personName) {
				 this.personName = this.$Route.query.personName
				 console.log(this.personName);
			 }
			 if(id){
				 console.log('id='+id);
				 this.id = id
				 this.getDetail()
			 } 
			 if(this.form.diseaseContent){
				 this.diseaseItem.forEach(item=>{
					 if(this.form.diseaseContent.includes(item.name)){
						 item.checked = true
					 }else{
						 item.checked = false
					 }
					 
				 })
			 }
			 console.log(this.form);
		},
		onShow() {
			
		},
	}
</script>

<style lang="scss" scoped>
	
.row{
	display: flex;
	height: 100rpx;
	align-items: center;
	.label{
		    width: 85px;
		    color: black;
		    text-align: right;
			margin-right: 24rpx;
	}
}
	
/deep/.u-text{
	justify-content: center !important;
}	
page {
  height: 100%;
  background-color: #fff;
}

.container {
  height: 100vh;
  background-color: #fff;
}




/*底部校园服务九宫格*/

.topcontent {
  width: 100%;
  height: 35px;
  background-color: #fff;
}

/*每行3宫格*/

.topcontent>view {
  flex-direction: row;
  display: flex;
}

/*每个单元格*/

.topcontent>view>view {
  width: 50%;
  text-align: center;
  height: fit-content;
  padding-top: 6px;
  padding-bottom: 6px;
}

/*每个单元格里的字体通用样式*/

.topcontent>view>view>view {
  text-align: center;
  font-size: 14px;
  color: #343434;
}

/*请假申请*/

.shenqing {
  border-bottom: 1px solid #fff;
}

.shenqing>button {
  background-color: #0cabdf;
  /* background-image: url('http://192.168.1.240:8080/image/ecard/ic_leave.png'); */
  background-image: url('https://ecard.amass.com.cn/image/ic_leave.png');
}

/*请假审核*/

.shenhe {
  border-bottom: 1px solid #fff;
}

.shenhe>button {
  background-color: #fa7e45;
  /* background-image: url('http://192.168.1.240:8080/image/ecard/ic_wallet.png'); */
  background-image: url('https://ecard.amass.com.cn/image/ic_wallet.png');
}

.container1 {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
}

.centercontent {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.centercontent .view1 {
  width: fit-content;
  height: fit-content;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 6px 12px;
  flex-grow: 1;
}

.centercontent .view1 picker {
  width: 100%;
  height: fit-content;
  padding: 12rpx;
}

.centercontent .view1 .separateline {
  width: 100%;
  height: 1px;
  background-color: #eaeaea;
}

.centercontent .view2 {
  width: fit-content;
  height: fit-content;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.centercontent .view2 .text {
  height: fit-content;
  min-width: 60px;
  text-align: center;
  font-size: 12px;
  margin: 12px;
}

.leixing {
  width: 100%;
  height: fit-content;
  display: flex;
  align-items: center;
}

.leixing .view {
  width: 100%;
  height: fit-content;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eaeaea;
  flex-direction: row;
  margin: 6px 12px;
}

.leixing .view .name {
  width: 85px;
  height: fit-content;
  color: black;
  text-align: right;
  margin: 12rpx;
}

.leixing .view .value {
  width: fit-content;
  height: fit-content;
  color: black;
  margin: 6rpx;
}

.leixing .view .value .radio {
  width: fit-content;
  height: 100%;
  margin: 6rpx 12rpx;
  text-align: left;
}

.containerView {
  padding: 20px;
}

/* .containerView {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 9px;
  padding-bottom: 9px;
  display: flex;
  align-items: center;
}

.containerView .view {
  width: 100%;
  height: fit-content;
  flex-direction: row;
  display: flex;
  align-items: center;
}

.containerView .view .input {
  margin-left: 6px;
  margin-right: 6px;
  padding: 3px;
} */

textarea {
  width: 100%;
  height: 260rpx;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 6px;
  padding-right: 6px;
  border: 1px solid #eaeaea;
}

.btnOperate {
  margin-top: 32px;
  margin-bottom: 32px;
}

.btnOperate>view {
  width: 100%;
  height: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.btnOperate>view:nth-child(1)>button {
  color: #fff;
  min-height: 45px;
  background-color: #2d8cf6;
}

.listItem {
  width: 100%;
  border-bottom: 1px solid #cecece;
}

.listItem>view {
  flex-direction: row;
  display: flex;
  align-items: center;
}

.listItem>view>view {
  width: fit-content;
  height: fit-content;
  padding: 6px;
}

.listItem>view>view>button {
  width: 55px;
  height: 55px;
  border-width: 0px;
  border-radius: 51px;
  background-position: center center;
  background-repeat: no-repeat;
  font-size: 26rpx;
  color: white;
}

.listItem>view>view>view {
  font-size: 14px;
  color: #343434;
  margin-top: 10px;
  text-align: center;
}

.tubiao {
  width: fit-content;
  height: fit-content;
}

.tubiao>button {
  background-color: #fabf06;
  display: flex;
  align-items: center;
}

.listItem>view .view1 {
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  flex: 1;
  flex-direction: column;
  margin-left: 3px;
  margin-right: 6px;
  box-sizing: border-box;
}

.listItem>view .view1 .view1 {
  width: 100%;
  height: fit-content;
  flex-direction: row;
  display: flex;
  align-items: center;
}

.listItem>view .view1 .view1 .text1 {
  width: fit-content;
  height: fit-content;
  font-size: 15px;
  color: black;
}

.listItem>view .view1 .view1 .text2 {
  width: fit-content;
  height: fit-content;
  font-size: 12px;
  color: black;
  display: flex;
  align-items: center;
  position: relative; /*启用相对定位*/
  float: right;
  overflow: hidden;
  justify-content: flex-end;
  flex-grow: 1;
}

.listItem>view .view1 .view2 {
  width: 100%;
  height: fit-content;
  flex-direction: row;
  display: flex;
}

.listItem>view .view1 .view2 .text1 {
  width: fit-content;
  height: fit-content;
  font-size: 15px;
  color: gray;
  text-align: start;
}

.listItem>view .view1 .view3 {
  width: 100%;
  height: fit-content;
  flex-direction: row;
  display: flex;
  align-items: center;
  position: relative; /*启用相对定位*/
  float: right;
  overflow: hidden;
  justify-content: flex-end;
  flex-grow: 1;
  margin-top: 6px;
  margin-bottom: 6px;
}

.listItem>view .view1 .view3 .text1 {
  border-radius: 6px;
  border: 1px solid #cecece;
  height: 23px;
  line-height: 23px;
  min-width: 60px;
  background-color: #fff;
  color: black;
  text-align: center;
  font-size: 12px;
  margin-right: 6px;
}

.listItem>view .view1 .view3 .text2 {
  border-radius: 6px;
  border: 1px solid #4089f0;
  height: 23px;
  line-height: 23px;
  min-width: 60px;
  background-color: #4089f0;
  color: #fff;
  text-align: center;
  font-size: 12px;
}

.listItem>view .view1 .view3 .hide {
  display: none;
}


</style>
